<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            position: relative;
        }
      #logo1{
          width: 2.23rem;
          height: 3.99rem;
          position: absolute;
          top: 2.12rem;
          left: 2.63rem;
      }
      #logo2{
          width: 3.83rem;
          height: 1.23rem;
          position: absolute;
          top:8.98rem;
          left:1.83rem;
      }
      img{
          width: 100%;
          height: 100%;
      }
      #load{
          width: .44rem;
          height: .44rem;
          /* background-color: rgb(138, 138, 138); */
          position: absolute;
          top: 11.9rem;
          left: 3rem;
      }
      #f-load{
          font-size: .28rem;
          position: absolute;
          top: 12rem;
          font-family: Verdana, Geneva, Tahoma, sans-serif;
          color: #b4924a;
          left: 3.5rem;

      }
      #ver{
          font-size: .28rem;
          position: absolute;
          color: #b4924a;
          top: 12.5rem;
          left: 3.15rem;
      } 

      #mycanvas{
        height: .44rem; 
        width:.44rem;
        animation: move 3s infinite linear;
        /* border: 1px solid; */
    }
    @keyframes move{
        from{transform:rotate()}
        to{transform:rotate(360deg)}
    }
    </style>
</head>
<body>
    <div id="logo1"><img src="../image/qidongxiang01.png" alt=""></div>
    <div id="logo2"><img src="../image/qidongxiang02.png" alt=""></div>
    <div id="load"><canvas id="mycanvas" width="400" height="400"></canvas></div>
    <div id="f-load">加载中</div>
    <div id="ver">Ver 4.4.3</div>


    <script src="../js/rem.js"></script>
    <script>
            var canvas = document.getElementById("mycanvas");
         
            var ctx = canvas.getContext("2d");
            var index = 0;
         
         
            function draw() {
                index++;
                if (index > 360) {
                    index = 0;
                }
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.beginPath();
                ctx.arc(200, 200, 150, Math.PI / 180 *270,  Math.PI / 180  * (index+270));
                ctx.strokeStyle = "#049689";
                ctx.lineWidth=40;
                ctx.stroke();
            }
         
            setInterval(function () {
                draw();
            }, 1000/360);
    </script>
    <script>
         window.onload = function(){
            setTimeout(() => {
                location.href = "引导页.html"
            }, 2000);
        }
    </script>
</body>
</html>